<template>
    <div>
        
        <van-tabs type='link' @click="togo">
            <van-tab title="关注"></van-tab>
            <van-tab title="社区"></van-tab>
            <van-tab title="优品"></van-tab>
        </van-tabs>
        <h4 class="top">关注你感兴趣的人</h4>
        <div class="center">
            <div v-for="(item,i) in list" :key="i" class="headphone" @click="tap($event)">
                <van-icon name="success" class="icon"/>
              <img :src="item.headphoto">
              <h4>{{item.username}}</h4>
              <p>{{item.babyname}}</p>
            </div>
      
             <div class="attention" @click="to">
                 <p @click="exist()">一键关注</p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import qs from 'Qs'
    export default {
         data() {
            return {
            arr:[1,2,3,4,5],
            list:[],
            
            };
        },
        methods: {
            tap(ev){
              let icon = ev.currentTarget.firstElementChild
              if(icon.style.display == 'block'){
                icon.style.display = 'none'
              }else{
                icon.style.display = 'block'
              }
              
            },
            to(){
                this.$router.push('/afterattention')
            },
            togo(index){
                if(index == 0){
                    this.$router.push('/afterattention')
                }else if(index == 2){
                     this.$router.push('/bestitem')
                }else if(index == 1){
                    this.$router.push('/pregnancy')
                }
            },
            exist(){
                let _this = this
                axios({
                    
                    dataType:'json',
                    url:'http://10.8.158.47:8080/addFocus.do',
                    params:{
                        uid:7,
                        fids:_this.this
                        
                    }
                }).then(function(data){
                    console.log(data)
                })
            }
        },
        mounted() {
            
            let that = this
            axios({
                method:'post',
                headers: {'X-Requested-With': 'XMLHttpRequest'},
              url:'http://10.8.158.60:8080/userAll12.do',
              data:qs.stringify({id:1,fids:that.arr})
            }).then(function(data){
              that.list = data.data.msg
 
            })
        },
    }
</script>

<style scoped>
    .top{
        width: 103px;
        height: 24px;
        color: #a4a2a2;
        font-size: 10px;
        font-weight: normal;
        text-align: center;
        line-height: 24px;
        background: #F8F8F8;
        position: relative;
        left: 136px;
        top: 45px;
    }
    .center{
        width: 350px;
        min-height: 630px;
        font-size: 12px;
        color: #a6a4a4;
        text-align: center;
        line-height: 17px;
        background: #f8f8f8;
        position: relative;
        left: 12px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        align-content: space-around;
        top:55px;
        padding-bottom: 46px
    }
    .center div{
        margin: 10px;
       position: relative;
    }
    .center div img{
        width: 74px;
        height: 74px;
        border-radius: 50%;
    }
    .icon{
        width: 14px;
        height: 14px;
        background: rgba(247,162,38,1);
        color: #fff;
        border-radius: 50%;
        position: absolute;
        left:65px;
        top: 3px;
        display: none
        
    }
    .attention{
        width: 131px;
        height: 24px;
        font-size: 16px;
        line-height: 23px;
        background: #d7d5d5;
        position: absolute;
        bottom: 15px;
        border-radius: 26px
    }
    
</style>